<template>
  <el-calendar v-model="value" id="calendar">
      <template
       slot="dateCell"
       slot-scope="{data}">
        <!--自定义内容-->
          <div>
             <div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div>
                <div v-for="(item, index) in calendarData" :key="index">
                   <div v-if="(item.months).indexOf(data.day.split('-').slice(1)[0])!=-1">
                     <div v-if="(item.days).indexOf(data.day.split('-').slice(2).join('-'))!=-1">
                          <el-tooltip class="item" effect="light" :content="item.things" placement="top">
                              <span class="is-selected">{{item.things}}</span>
                          </el-tooltip>
                       </div>
                    <div v-else></div>
                   </div>
               <div v-else></div>
             </div>
          </div>
      </template>
</el-calendar>
</template>

<script>
export default {
  name: 'ContentRight',
  data() {
    return {
      calendarData: [
        { months: ['09', '11'], days: ['15'], things: '看电影' },
        { months: ['10', '11'], days: ['02'], things: '去公园野炊' },
        { months: ['11'], days: ['02'], things: '卡的砂锅豆腐阿三管道敷设方式是VS接电话v' },
        { months: ['11'], days: ['02'], things: '看月亮' }
      ],
      value: new Date()
    }
  }
}
</script>
<style>
.calendar-day{
  text-align: center;
  color: #202535;
  line-height: 30px;
  font-size: 12px;
}
.is-selected{
  color: #F8A535;
  font-size: 10px;
  margin-top: 5px;
}
.el-calendar-table .el-calendar-day {
  width: 50px;
  height: 50px;
}
</style>
